<template>
  <div class="mask" v-if="store.visiableNotClose">
    <div id="auth-box" class="ContentRoot" :style="{width:state.showBg?'400px':'330px'}">
      <div from="modal" class="jBrNOf">
        <div class="aboveContent">
          <div target="signin" from="modal" class="jYHTzo isWebMain modal-main">
            <header class="igBpUx modal-header" from="modal">
              <div class="logo-container">
                <img src="../assets/logo.png"></div>
              <div class="header-text">登录讯颖账号<span class="lower-size"></span></div>
              <div class="dSXTIF header-tab" from="modal">
                <div @click="state.loginType = 1;getCodeUrl();state.isAgree=true" id="WECHAT_LOGIN_ID" class="tab-item"
                     :class="[state.loginType==1?'active':'']">微信登录
                </div>
                <div @click="state.loginType=2" id="CODE_LOGIN_ID" class="tab-item" :class="[state.loginType==2?'active':'']">验证码登录</div>
              </div>
<!--              <div class="close newSignin" @click="store.visiableNotClose = false">-->
<!--                <svg xmlns="http://www.w3.org/2000/svg"-->
<!--                     class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon general/modal/times icon close-btn"-->
<!--                     viewBox="0 0 28 28" aria-hidden="true">-->
<!--                  <path fill-rule="evenodd"-->
<!--                        d="M8.85 8.15a.5.5 0 1 0-.7.7L13.29 14l-5.14 5.15a.5.5 0 0 0 .7.7L14 14.71l5.15 5.14a.5.5 0 0 0 .7-.7L14.71 14l5.14-5.15a.5.5 0 0 0-.7-.7L14 13.29 8.85 8.15Z"-->
<!--                        clip-rule="evenodd"></path>-->
<!--                </svg>-->
<!--              </div>-->
            </header>
            <div class="eWSxK dnViua sign-page" from="modal">
              <div class="inputContanier signup" v-if="state.loginType==2">
                <div class="entry-input emailPhone">
                  <label
                      class="hDDJba Input regular InputWithErrorTips__StyledInputWithErrorTips-sc-5u8ieg-0 jKEzMP InputWithErrorTips phoneCode">
                    <el-input type="text" v-model.trim="state.form.phone" maxlength="11" placeholder="请输入手机号"/>
                  </label>
                </div>
                <div class="entry-input custom-entry-input verifyCode">
                  <label
                      class="hDDJba Input regular InputWithErrorTips__StyledInputWithErrorTips-sc-5u8ieg-0 jKEzMP InputWithErrorTips verify-code-input">
                    <el-input type="text" v-model.trim="state.form.code" maxlength="6" placeholder="请输入6位数验证码"/>
                  </label>
                  <div class="get-code-container">
                    <button @click="getCode" class="get-code-text active">{{ state.codeText }}</button>
                  </div>
                </div>
                <div class="entry-input msgcode">
                  <div
                      class="ccPAGz Button__StyledAuthPriButton-sc-ojay7k-0 lmCcVo submit button-root type-primary size-large corner-smooth">
                    <div class="btn-icon-text-container" @click="loginIn">
                      <span class="btn-text">立即登录</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <img :src="state.codeUrl" style="width:200px;"
                     :style="{margin: state.showBg?'0 60px 15px':'0 25px 15px'}"/>
                <div v-if="state.codeUrl==''" style="height:200px;width:100%;" v-loading="state.codeUrl==''"></div>
              </div>
            </div>
            <ul class="hghOZU footer" type="signin" from="modal">
              <div v-if="!state.showBg&&state.loginType==1">长按扫描二维码进行登录</div>
              <div class="signway-container" v-if="state.showBg&&state.loginType==2">
                <span class="divider">其他登录方式</span>
                <div class="login-way">
                  <button @click="state.loginType=1;getCodeUrl();state.isAgree=true" class="login-wechat">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         class="svg__StyledSvg-sc-5p68xx-0 gSyYMA svg-icon ext00/login/wechat/2312 icon"
                         viewBox="0 0 24 24" aria-hidden="true">
                      <path fill="#00C250" fill-rule="evenodd"
                            d="M15.67 9.53c3.2 0 5.8 2.12 5.8 4.72 0 1.48-.83 2.8-2.13 3.66l.33 1.65-1.78-.94c-.68.23-1.43.36-2.22.36-3.2 0-5.78-2.12-5.78-4.73 0-2.6 2.59-4.72 5.78-4.72ZM9.94 4.56c3.18 0 5.86 1.81 6.68 4.28-.31-.04-.63-.06-.95-.06-3.6 0-6.55 2.42-6.55 5.47 0 .7.15 1.38.44 2a8.01 8.01 0 0 1-2.25-.43L5.2 16.93l.39-1.97A5.55 5.55 0 0 1 3 10.4c0-3.23 3.1-5.85 6.94-5.85Zm3.69 7.21a.84.84 0 0 0-.85.83c0 .46.38.83.85.83s.85-.37.85-.83a.84.84 0 0 0-.85-.83Zm4.09 0a.84.84 0 0 0-.85.83c0 .46.38.83.85.83s.85-.37.85-.83a.84.84 0 0 0-.85-.83ZM7.44 7.39a.94.94 0 0 0-.95.92c0 .51.43.93.95.93s.95-.42.95-.93a.94.94 0 0 0-.95-.92Zm4.99 0a.94.94 0 0 0-.95.92c0 .51.43.93.95.93s.95-.42.95-.93a.94.94 0 0 0-.95-.92Z"
                            clip-rule="evenodd"></path>
                    </svg>
                  </button>
                </div>
              </div>
              <div class="confirm-agreement" v-if="state.loginType==2">
                <label class="jHxzbm CoreCheck regular NewFooter__StyledCoreCheck-sc-13ywbi0-1 cOqqcN">
                  <el-checkbox v-model="state.isAgree"></el-checkbox>
                  <span class="Check-label">我已阅读并同意讯颖科技<a
                      style="color: rgb(0, 123, 255); cursor: pointer;"> 许可协议 </a>和<a
                      style="color: rgb(0, 123, 255); cursor: pointer;"> 隐私政策</a>，未注册手机登录时会自动创建账号</span>
                </label>
                <div v-if="!state.isAgree" class="agreement-tip show">请先同意并勾选上述协议</div>
              </div>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import requester from "~/utils/request";
import {userStore} from "~/composables/useUserStore";
const store = userStore()
const state = reactive(<any>{
  showBg: true,
  codeUrl: '',
  sceneStr: '',
  form: {
    phone: '',
    code: ''
  },
  loginType: 1,
  isAgree: false,
  codeInterval: null,
  codeNumber: 60,
  codeText: '获取验证码',
})

// 监听store中的visiableNotClose状态
watch(() => store.visiableNotClose, (newValue) => {
  if (newValue){
    getCodeUrl();
  }
})


// 客户端渲染
onMounted(() => {
  // 当窗口大小改变时触发的事件
  window.onresize = () => {
    state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 600 ? false : true
  }
  // 初始化时，决定是否显示背景
  state.showBg = /Mobi|Android|iPhone/i.test(navigator.userAgent) || state.width < 600 ? false : true
  // 检查条件来执行不同的操作
  if (state.showBg ) {
    state.isAgree = true // 用户同意协议
  } else {
    // 否则，将登录类型设为2（可能表示另一种登录方式）
    state.loginType = 2
  }
  // 清除现有的定时器，避免重复调用
  if (state.codeInterval != null) clearInterval(state.codeInterval)
})
// PC扫码链接
function getCodeUrl() {
  requester.post(`/api/login/scanCodeUrl`).then((res:any) => {
    state.codeUrl = `https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${res.data.ticket}`
    state.sceneStr = res.data.sceneStr
    getLoginCode()
  })
}
// 监听扫码成功
function getLoginCode() {
  requester.post(`/api/login/scanLogin`, {sceneStr: state.sceneStr}).then((res:any) => {
    // if (res.code == 333) {
    //   getCodeUrl()
    //   ElMessage.warning('请重新扫码')
    // }
    if (res.code == 332 || res.code == 300) {
      setTimeout(() => {
        getLoginCode()
      }, 3000)
    }
    if (res.code == 200) {
      ElMessage.success('登录成功！')
      //存储用户信息
      store.setToken(res.data)
      //设置登录状态
      store.isLogin = true
      //关闭登录框
      store.visiableNotClose = false
      return
    }
  })
}

//获取验证码
function getCode() {
  var re = /^1\d{10}$/
  if (re.test(state.form.phone)) {
    if (state.codeInterval !== null) return
    if (!state.isAgree) {
      ElMessage.warning('请先同意并勾选上述协议!')
      return
    }
    requester.post('api/login/sendCode', {
      mobile: state.form.phone
    }).then((res:any) => {
      if (res.code == 200) {
        ElMessage.success('已发送验证码')
        codeIntervalFunc() //更改验证码时间
      } else {
        ElMessage.error(res.msg)
      }
    })

  } else {
    ElMessage.error('手机号格式不正确')
  }
}

// 手机验证码登录
function loginIn() {
  requester.post(`api/login/mobileLogin`, {
    mobile: state.form.phone,
    code: state.form.code
  }).then((res:any) => {
    if (res.code == 200) {
      ElMessage.success('登录成功！')
      //存储用户信息
      store.setToken(res.data)
      //设置登录状态
      store.isLogin = true
      //关闭登录框
      store.visiableNotClose = false
    } else {
      ElMessage.error(res.msg)
    }
  })
}


function  codeIntervalFunc() {
  state.codeInterval = setInterval(() => {
    state.codeNumber -= 1
    state.codeText = `${state.codeNumber}秒后获取`
    if (state.codeNumber == 0) {
     codeIntervalFunc()
      state.codeText = '获取验证码'
      state.codeNumber = 60
      state.codeInterval = null
    }
  }, 1000)
}


</script>
<style>
.mask {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #00000050;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

#auth-box {
  height: 100%;
  position: absolute;
  width: 400px;
  z-index: 9999;
  background: #fff;
  border-radius: 10px;
  height: 600px;
}

.jBrNOf {
  height: 100%;
}

.jBrNOf .aboveContent {
  height: 100%;
  display: flex;
}

.igBpUx .logo-container {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 24px;
}

.igBpUx .header-text {
  height: 26px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.9);
  margin-bottom: 24px;
}

.dSXTIF {
  display: flex;
  height: 30px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 24px;
}

.igBpUx .header-text .lower-size {
  font-size: 14px;
}

.igBpUx.modal-header .close {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border: none;
  color: rgba(0, 0, 0, 0.6);
  background: transparent;
  position: absolute;
  top: 11px;
  right: 20px;
  cursor: pointer;
}

.dSXTIF .tab-item {
  font-size: 14px;
  height: 18px;
  line-height: 18px;
  padding: 3px 0px 4px;
  box-sizing: content-box;
  color: rgba(0, 0, 0, 0.6);
}

.dSXTIF .tab-item.active {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 600;
  border-bottom: 2px solid rgb(22, 132, 252);
  animation: fadeIn .3s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.dSXTIF .tab-item:nth-child(2) {
  margin: 0px 32px;
}

.igBpUx.modal-header .close svg {
  width: 100%;
  height: 100%;
}

.jYHTzo {
  user-select: none;
  font-size: 14px;
  flex: 1 1 0%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  padding: 0px 40px;
  margin: 0px auto;
}

.igBpUx {
  padding-top: 40px;
  width: 100%;
}

.eWSxK {
  position: relative;
  width: 100%;
}

.eWSxK .entry-input {
  width: 100%;
  margin-bottom: 16px;
}

.jKEzMP.Input.InputWithErrorTips {
  width: 100%;
  height: 40px;
}

.jKEzMP.Input.InputWithErrorTips input {
  border-top: none;
  border-right: none;
  border-left: none;
  border-image: initial;
  border-radius: 0px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.26);
  background-color: transparent;
  padding: 10px;
  width: 100%;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px;
  color: rgba(0, 0, 0, 0.9);
  caret-color: rgb(41, 141, 248);
}

.dnViua .custom-entry-input .get-code-text.active {
  color: rgb(22, 132, 252);
}

.dnViua .custom-entry-input .get-code-text {
  position: absolute;
  right: 0px;
  top: 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}

button {
  border: none;
  background: unset;
}

.dnViua .custom-entry-input {
  position: relative;
}

.eWSxK .entry-input {
  width: 100%;
  margin-bottom: 16px;
}

.dnViua .msgcode {
  margin: 24px 0px;
}

.dnViua .submit {
  position: relative;
}

.lmCcVo[class*="corner-smooth"] {
  border-radius: 8px;
}

.ccPAGz[class*="type-primary"] {
  color: rgb(255, 255, 255);
  background: rgb(22, 132, 252);
  font-weight: 600;
  border: 1px solid transparent;
}

.lmCcVo[class*="size-large"] {
  height: 40px;
  line-height: 40px;
}

.ccPAGz[class*="size-large"] .btn-icon-text-container {
  min-width: 76px;
}

.ccPAGz .btn-icon-text-container {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.lmCcVo {
  width: 100%;
  height: 48px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 18px;
  display: flex;
}

.ccPAGz {
  border-radius: 6px;
  display: inline-block;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  user-select: none;
  cursor: pointer;
}

.hghOZU.footer {
  width: 100%;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  font-size: 14px;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  padding-bottom: 34px;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.hghOZU .signway-container {
  flex: 1 1 0%;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.hghOZU .signway-container .divider {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.hghOZU .signway-container .divider::before {
  margin-right: 9px;
}

.hghOZU .signway-container .divider::before, .hghOZU .signway-container .divider::after {
  display: block;
  content: "";
  width: 115px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.26);
}

.hghOZU .signway-container .login-way {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}

.hghOZU .signway-container .login-way .login-wechat, .hghOZU .signway-container .login-way .login-feishu {
  width: 40px;
  height: 40px;
  margin: 0px 10px;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0, 0.26);
  transition: all 100ms ease 0s;
}

.hghOZU .signway-container .login-way .login-wechat svg {
  width: 24px;
}

.hghOZU .confirm-agreement {
  position: relative;
}

.hghOZU.footer {
  width: 100%;
  display: flex;
  -webkit-box-pack: end;
  justify-content: flex-end;
  font-size: 14px;
  flex-direction: column;
  -webkit-box-align: center;
  align-items: center;
  padding-bottom: 34px;
}

.jHxzbm.regular {
  font-size: 14px;
}

.cOqqcN {
  max-height: 32px;
}

.jHxzbm {
  position: relative;
  display: inline-flex;
  -webkit-box-align: baseline;
  align-items: baseline;
  line-height: 1.5;
  cursor: pointer;
  color: rgb(91, 107, 115);
}

.jHxzbm > input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0px;
}

input {
  line-height: normal;
}

.jHxzbm.CoreCheck .Check-state {
  background-color: rgb(255, 255, 255);
  border-color: rgb(186, 205, 214);
}

.cOqqcN .Check-state {
  width: 14px;
  height: 14px;
  font-size: 14px;
  transform: translateY(3px);
  border-color: rgba(0, 0, 0, 0.26);
}

.jHxzbm .Check-state {
  position: relative;
  flex: 0 0 1em;
  margin-right: 0.33333em;
  width: 1em;
  height: 1em;
  transform: translateY(1px);
  font-size: 12px;
  background-color: rgb(246, 247, 248);
  border: 1px solid rgb(141, 158, 167);
  border-radius: 2px;
  color: rgb(255, 255, 255);
  transition: all 0.2s ease-in-out 0s;
}

.jHxzbm .Check-state .svg-icon.check {
  position: absolute;
  top: -1px;
  left: -1px;
  transition: all 0.2s ease-in-out 0s;
  opacity: 0;
}

.gSyYMA {
  fill: currentcolor;
  width: 1em;
}

.cOqqcN .Check-label {
  text-align: left;
  font-size: 12px;
  line-height: 16px;
  color: rgba(0, 0, 0, 0.8);
  margin-left: 10px;
}

.hghOZU.footer a {
  cursor: pointer;
  color: rgb(0, 123, 255);
}

.hghOZU .confirm-agreement .agreement-tip.show {
  opacity: 1;
  visibility: visible;
}

.hghOZU .confirm-agreement .agreement-tip {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.72);
  color: rgb(255, 255, 255);
  width: max-content;
  position: absolute;
  left: -16px;
  top: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out 0s;
}

.hghOZU .confirm-agreement .agreement-tip::after {
  content: "";
  display: block;
  width: 0px;
  height: 0px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent rgba(0, 0, 0, 0.72);
  border-image: initial;
  position: absolute;
  bottom: 100%;
  left: 18px;
}


input:focus {
  outline: none;
  padding: 10px;
}
</style>
